<!-- ProjectDynamics.vue -->
<template>
  <div class="project-dynamics">
    <!-- 加载动画 -->
    <div v-if="loading" class="flex justify-center items-center h-[600px]">
      <div class="loader"></div>
    </div>
    <ul v-else class="list-none p-0">
      <li
        v-for="item in dynamics"
        :key="item.id"
        class="border-b border-gray-300 py-5 flex justify-between items-center"
      >
        <div class="dynamic-item flex items-center">
          <div class="dynamic-content flex-1 mr-5">
            <router-link :to="{ name: 'PJPage', params: { id: item.id } }">
              <h2 class="text-2xl mb-2">{{ item.title }}</h2>
              <h4 class="mb-2 text-gray-700">{{ item.content }}</h4>
              <span class="text-sm text-gray-500">{{ item.date }}</span>
            </router-link>
          </div>
        </div>
        <div class="dynamic-links dynamic-image">
          <img :src="item.image" alt="示例图片" class="w-[200px]" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  dynamics: Array,
  loading: Boolean,
});
</script>

<style scoped>
.project-dynamics {
  font-family: sans-serif;
}

.project-dynamics ul {
  list-style: none;
  padding: 0;
}

.project-dynamics li {
  padding: 20px 0;
}

/* 加载样式 */
.loader {
  border: 8px solid rgba(255, 255, 255, 0.3); /* 背景透明的边框 */
  border-top: 8px solid #3498db; /* 顶部颜色 */
  border-radius: 50%; /* 圆形 */
  width: 50px; /* 图标宽度 */
  height: 50px; /* 图标高度 */
  animation: spin 1s linear infinite; /* 旋转动画 */
}

/* 定义旋转动画 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
